import React from 'react';
import PropTypes from 'prop-types';
import styles from './style.css';
import {Card, Row, Col, Table, Button, Spin, Form, Divider} from 'antd';
import {PERMISSION} from './constants';
import {DATETIME_FORMAT, TABLE, DATE_FORMAT, FILES_API, FORM_OPTIONS, FORM_ROW_OPTIONS} from '../constants';
import {hasPermissions} from './utils';
import {conventEnumValueToString, formatAmount, formatDateTime} from '../utils';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import {currency, goodWillType, claimApprovedResult, goodWillDetailType, fileType} from '../Enum';
import FormItem from 'antd/lib/form/FormItem';
import SearchInput from 'Shared/components/SearchInput';
import {injectIntl, language, formatMessage} from './intl';
import WrappedPopconfirm from '../common/WrappedPopconfirm';
import WrappedSelect from '../common/WrappedSelect';
import WrappedInputNumber from '../common/WrappedInputNumber';
import TextInput from 'Shared/components/TextInput';
import ImageUpload from './ImageUpload';
import {rejectValidator} from './validator';
import PersonnelSelectPanel from './PersonnelSelectPanel';
import {abandonOrder, submitOrder, getDetail, confirmOrder} from './api';
import routes from './routes';
const {Description} = DescriptionList;
const EMPTY_ARRAY = [];
const date = new Date();
let totalFee = 0;
let laborFee = 0;
let materialFee = 0;
export class ConfirmPanel extends React.PureComponent {
    state = {
        loading: false,
        details: [],
        athDetails: [],
        approveResults: [],
        data: {},
        confirmDetail: {},
        showPersonnelSelectPanel: false,
    };

    componentDidMount() {
        this.getDetailInfo();
    }

    getDetailInfo = () => {
        this.setState({loading: true});
        getDetail(this.props.id)
            .then(res => {
                if(res.ok)
                    this.setState({
                        loading: false,
                        data: res.data,
                        approveResults: res.data.approveResults,
                        athDetails: res.data.athDetails,
                        details: res.data.details,
                    });
                else
                    this.setState(({
                        loading: false
                    }));
            });
    }

    handleUpdateClick = () => {
        this.props.history.push(routes.update.format(this.props.id));
    }
    // eslint-disable-next-line react/sort-comp
    onClickAbandon = () => {
        this.setState({loading: true});
        const data = {
            rowVersion: this.state.data.rowVersion
        };
        abandonOrder(this.state.data.id, data)
            .then(res => {
                this.setState({loading: false});
                if(res.ok)
                    this.props.successReturn();
            });
    }
    onClickSubmit = () => {
        this.setState({loading: true});
        const data = {
            rowVersion: this.state.data.rowVersion
        };
        submitOrder(this.state.data.id, data)
            .then(res => {
                this.setState({loading: false});
                if(res.ok)
                    this.props.successReturn();
            });
    }
    onChange = (value, name) => {
        let confirmDetail = Object.assign({}, this.state.confirmDetail, {
            [name]: value
        });
        if(name === 'approvedResult' && value === claimApprovedResult.同意)
            confirmDetail = Object.assign({}, confirmDetail, {
                approveComment: 'Agree'
            });
        this.setState({
            confirmDetail,
            hasOperat: true
        });
    }
    onSubmit = () => {
        const {confirmDetail, details, data} = this.state;
        const {id, isDealerUser, successReturn} = this.props;
        const isValid = rejectValidator(data, confirmDetail, isDealerUser);
        if(!isValid) {
            this.setState({
                validate: true
            });
            return;
        }
        this.setState(({loading: true}));
        confirmOrder(id, {
            totalFee,
            laborFee,
            materialFee,
            approvedFee: data.approvedFee ? data.approvedFee : totalFee,
            approveTime: formatDateTime(date, DATETIME_FORMAT),
            goodWillType: confirmDetail.goodWillType ? confirmDetail.goodWillType : data.type,
            noticer: confirmDetail.noticer,
            approveComment: confirmDetail.approveComment,
            approvedResult: confirmDetail.approvedResult,
            details: details.map(v => ({
                type: v.type,
                code: v.code,
                name: v.name,
                usedQty: v.usedQty,
                price: v.price,
                totalPrice: v.price * v.usedQty || 0
            })),
            rowVersion: data.rowVersion,
        })
            .then(res => {
                if(res.ok)
                    successReturn();
                else
                    this.setState(({
                        loading: false
                    }));
            });
    }
    handleFilterChange = (value, name) => {
        const data = Object.assign({}, this.state.data, {
            [name]: value
        });
        this.setState({
            data,
            hasOperat: true
        });
    }
    onTableChange = (value, name, id) => {
        const details = this.state.details || [];
        const tmp = details.map(d => {
            if(d.id === id)
                return Object.assign({}, d, {
                    [name]: value,
                });
            return d;
        });
        this.setState({
            details: tmp,
            hasOperat: true
        });
    }
    onRemovePhoto = data => {
        const athDetails = this.state.athDetails || EMPTY_ARRAY;
        let attachments = EMPTY_ARRAY;
        const tmp = athDetails.map(d => {
            if(d.fileType === fileType.图片) {
                attachments = d.attachments || EMPTY_ARRAY;
                attachments.splice({
                    fileId: data.id,
                    fileName: data.name
                }, 1);
                return Object.assign({}, d, {
                    attachments: [...attachments]
                });
            }
            return d;
        });
        this.setState({
            athDetails: tmp,
            hasOperat: true
        });
    }
    onClickStopPropagation = e => {
        e.stopPropagation();
    }
    onRemoveFile = data => {
        const athDetails = this.state.athDetails || EMPTY_ARRAY;
        let attachments = EMPTY_ARRAY;
        const tmp = athDetails.map(d => {
            if(d.fileType === fileType.文件) {
                attachments = d.attachments || EMPTY_ARRAY;
                attachments.splice({
                    fileId: data.id,
                    fileName: data.name
                }, 1);
                return Object.assign({}, d, {
                    attachments: [...attachments]
                });
            }
            return d;
        });
        this.setState({
            athDetails: tmp,
            hasOperat: true
        });
    }
    onChangeUploadFile = data => {
        const athDetails = this.state.athDetails || [];
        const index = athDetails.findIndex(v => v.fileType === fileType.文件);
        const attachmentsTmp = [];
        attachmentsTmp.push({
            fileId: data.id,
            fileName: data.fileName
        });
        if(index === -1) {
            athDetails.push({
                fileType: fileType.文件,
                attachments: attachmentsTmp
            });
            this.setState({
                claimAthDetails: [...athDetails],
                hasOperat: true
            });
        } else {
            const tmp = athDetails.map(d => {
                if(d.fileType === fileType.文件)
                    return Object.assign({}, d, {
                        attachments: d.attachments.concat(attachmentsTmp)
                    });
                return d;
            });
            this.setState({
                athDetails: tmp,
                hasOperat: true
            });
        }
    }
    onChangeUploadPhoto = data => {
        const athDetails = this.state.athDetails || [];
        const index = athDetails.findIndex(v => v.fileType === fileType.图片);
        const attachmentsTmp = [];
        attachmentsTmp.push({
            fileId: data.id,
            fileName: data.fileName
        });
        if(index === -1) {
            athDetails.push({
                fileType: fileType.图片,
                attachments: attachmentsTmp
            });
            this.setState({
                claimAthDetails: [...athDetails],
                hasOperat: true
            });
        } else {
            const tmp = athDetails.map(d => {
                if(d.fileType === fileType.图片)
                    return Object.assign({}, d, {
                        attachments: d.attachments.concat(attachmentsTmp)
                    });
                return d;
            });
            this.setState({
                athDetails: tmp,
                hasOperat: true
            });
        }
    }
    onClickSearchPersonnelBtn = () => {
        this.setState({
            showPersonnelSelectPanel: true
        });
    }
    onClosePersonnelSelectPanel = () => {
        this.setState({showPersonnelSelectPanel: false});
    }
    
    onSelectPersonnel = records => {
        this.setState({
            confirmDetail: Object.assign({}, this.state.confirmDetail, {
                noticer: records.id,
                noticerName: records.name,
            }),
            hasOperat: true,
            showPersonnelSelectPanel: false
        });
    }
    render() {
        const {id, permissions, onCancel} = this.props;
        const {confirmDetail, data, details, athDetails, validate} = this.state;
        const submitable = hasPermissions(PERMISSION.confirm, permissions);
        const validateGoodWillType = !confirmDetail.goodWillType && validate ? 'error' : null;
        const validateApproveComment = !confirmDetail.approveComment && validate ? 'error' : null;
        const validateApprovedResult = !confirmDetail.approvedResult && validate ? 'error' : null;
        const operations = [];
        if(hasPermissions(permissions, PERMISSION.update) && hasPermissions(data.options, PERMISSION.update))
            operations.push(<Button key="update" href={`#${routes.update.format(id)}`} size="small">{
                formatMessage({
                    id: 'confirmPanel.update',
                    defaultMessage: '编辑'
                })
            }</Button>);
        if(hasPermissions(permissions, PERMISSION.confirm) && hasPermissions(data.options, PERMISSION.confirm))
            operations.push(<Button key="confirm" href={`#${routes.confirm.format(id)}`} size="small">{
                formatMessage({
                    id: 'confirmPanel.opeation',
                    defaultMessage: '确认'
                })
            }</Button>);
        if(hasPermissions(permissions, PERMISSION.abandon) && hasPermissions(data.options, PERMISSION.abandon))
            operations.push(<WrappedPopconfirm
                key="abandon"
                id={id}
                placement="topLeft"
                onConfirm={this.onClickAbandon}
                title={formatMessage({
                    id: 'confirmPanel.validate.abandon',
                    defaultMessage: '是否确认作废？'
                })}>
                <Button key="abandon" size="small">{
                    formatMessage({
                        id: 'confirmPanel.abandon',
                        defaultMessage: '作废'
                    })
                }</Button>
            </WrappedPopconfirm>);
        if(hasPermissions(permissions, PERMISSION.submit) && hasPermissions(data.options, PERMISSION.submit))
            operations.push(<WrappedPopconfirm
                key="submit"
                id={id}
                placement="topLeft"
                onConfirm={this.onClickSubmit}
                title={formatMessage({
                    id: 'confirmPanel.validate.submit',
                    defaultMessage: '是否确认提交？'
                })}>
                <Button key="submit" size="small">{
                    formatMessage({
                        id: 'confirmPanel.submit',
                        defaultMessage: '提交'
                    })
                }</Button>
            </WrappedPopconfirm>);
        const columns = [
            {
                title: formatMessage({
                    id: 'confirmPanel.type',
                    defaultMessage: '类型'
                }),
                dataIndex: 'type',
                render: text => conventEnumValueToString(goodWillDetailType, text)
            },
            {
                title: formatMessage({
                    id: 'confirmPanel.code',
                    defaultMessage: '编号'
                }),
                dataIndex: 'code',
            },
            {
                title: formatMessage({
                    id: 'confirmPanel.name',
                    defaultMessage: '名称'
                }),
                dataIndex: 'name',
            },
            {
                title: formatMessage({
                    id: 'confirmPanel.usedQty',
                    defaultMessage: '数量'
                }),
                dataIndex: 'usedQty',
                render: (text, record) => {
                    const validate = (!text) && this.state.validate ? {validateStatus: 'error'} : null;
                    return (
                        <FormItem {...validate}>
                            <WrappedInputNumber
                                name="usedQty"
                                min={0}
                                precision={0}
                                value={record.usedQty}
                                onChange={value => this.onTableChange(value, 'usedQty', record.id)} />
                        </FormItem>
                    );
                }
            },
            {
                title: formatMessage({
                    id: 'confirmPanel.price',
                    defaultMessage: '单价'
                }),
                dataIndex: 'price',
                render: (text, record) => {
                    const validate = (!text) && this.state.validate ? {validateStatus: 'error'} : null;
                    return (
                        <FormItem {...validate}>
                            <WrappedInputNumber
                                name="price"
                                min={0}
                                precision={2}
                                value={record.price}
                                onChange={value => this.onTableChange(value, 'price', record.id)} />
                        </FormItem>
                    );
                }
            },
            {
                title: formatMessage({
                    id: 'confirmPanel.totalPrice',
                    defaultMessage: '费用合计'
                }),
                dataIndex: 'totalPrice',
                render: (text, record) => formatAmount(record.price * record.usedQty || 0)
            },
        ];
        totalFee = 0;
        laborFee = 0;
        materialFee = 0;
        if(details)
            details.forEach(d => {
                if(d.type === 1)
                    laborFee += (d.price * d.usedQty || 0);
                
                if(d.type === 2)
                    materialFee += (d.price * d.usedQty || 0);
            });
        
        totalFee = laborFee + materialFee;
        const columResults = [{
            title: formatMessage({
                id: 'confirmPanel.approverName',
                defaultMessage: '审核人'
            }),
            dataIndex: 'approverName'
        },
        {
            title: formatMessage({
                id: 'confirmPanel.approveComment',
                defaultMessage: '意见'
            }),
            dataIndex: 'approveComment'
        },
        {
            title: formatMessage({
                id: 'confirmPanel.approvedResult',
                defaultMessage: '审核结果'
            }),
            dataIndex: 'approvedResult',
            render: text => conventEnumValueToString(claimApprovedResult, text)
        },
        {
            title: formatMessage({
                id: 'confirmPanel.approveTime',
                defaultMessage: '审核时间'
            }),
            dataIndex: 'approveTime',
            render: text => formatDateTime(text, DATETIME_FORMAT)
        }];
        const athDetailsTuPhoto = (athDetails && athDetails.find(v => v.fileType === fileType.图片)) || {};
        const athDetailsTuFile = (athDetails && athDetails.find(v => v.fileType === fileType.文件)) || {};
        return (
            <div className={styles.detail}>
                <Spin spinning={this.state.loading}>
                    <div className="form-standard">
                        <Form>
                            <Card {...FORM_OPTIONS.col} title={formatMessage({
                                id: 'detailPage.card.tradeMethodmessage',
                                defaultMessage: '基本信息'
                            })}>
                                <Row>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'detailPage.data.code',
                                            defaultMessage: '编号'
                                        })}{...FORM_OPTIONS.item}>
                                            {data.code}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'detailPage.data.brand',
                                            defaultMessage: '品牌'
                                        })}{...FORM_OPTIONS.item}>
                                            {`(${data.brandCode})${data.brandName}`}
                                        </FormItem>
                                    </Col>
                                    
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'detailPage.data.currency',
                                            defaultMessage: '币种'
                                        })}{...FORM_OPTIONS.item}>
                                            {conventEnumValueToString(currency, data.currency)}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'detailPage.data.country',
                                            defaultMessage: '国家'
                                        })}{...FORM_OPTIONS.item}>
                                            {data.country}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'detailPage.data.VIN',
                                            defaultMessage: 'VIN'
                                        })}{...FORM_OPTIONS.item}>
                                            {data.vin}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'detailPage.data.productCategoryCode',
                                            defaultMessage: '车型'
                                        })}{...FORM_OPTIONS.item}>
                                            {data.productCategoryCode}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'detailPage.data.engineCode',
                                            defaultMessage: '发动机号'
                                        })}{...FORM_OPTIONS.item}>
                                            {data.engineCode}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'detailPage.data.transmissionSn',
                                            defaultMessage: '变速箱号'
                                        })}{...FORM_OPTIONS.item}>
                                            {data.transmissionSn}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'detailPage.data.salesDate',
                                            defaultMessage: '实销日期'
                                        })}{...FORM_OPTIONS.item}>
                                            {formatDateTime(data.salesDate, DATE_FORMAT)}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'detailPage.data.mileage',
                                            defaultMessage: '行驶里程'
                                        })}{...FORM_OPTIONS.item}>
                                            {data.mileage}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'detailPage.data.tel',
                                            defaultMessage: '联系电话'
                                        })}{...FORM_OPTIONS.item}>
                                            {data.tel}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'detailPage.data.faultItem',
                                            defaultMessage: '故障代码'
                                        })}{...FORM_OPTIONS.item}>
                                            ({data.faultItemCode}) {data.faultItemName}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'detailPage.data.customer',
                                            defaultMessage: '客户名称'
                                        })}{...FORM_OPTIONS.item}>
                                            {data.customer}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'detailPage.data.productCategoryCode',
                                            defaultMessage: '车型'
                                        })}{...FORM_OPTIONS.item}>
                                            {data.productCategoryCode}
                                        </FormItem>
                                    </Col>
                                
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'detailPage.data.totalFee',
                                            defaultMessage: '申请金额'
                                        })}{...FORM_OPTIONS.item}>
                                            {formatAmount(totalFee)}
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem label={formatMessage({
                                            id: 'detailPage.data.approvedFee',
                                            defaultMessage: '审批金额'
                                        })}{...FORM_OPTIONS.item}>
                                            <WrappedInputNumber
                                                name="approvedFee"
                                                min={0}
                                                precision={2}
                                                value={data.approvedFee || totalFee}
                                                onChange={this.handleFilterChange} />
                                        </FormItem>
                                    </Col>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem
                                            label={formatMessage({
                                                id: 'detailPage.form.createTime',
                                                defaultMessage: '申请时间'
                                            })}
                                            {...FORM_OPTIONS.item}>
                                            {formatDateTime(data.createTime, DATETIME_FORMAT)}
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row className="row-margin">
                                    <Col>
                                        <FormItem label={formatMessage({
                                            id: 'detailPage.data.opinion',
                                            defaultMessage: '申请原因'
                                        })}{...FORM_ROW_OPTIONS.item}>
                                            {data.opinion}
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row className="row-margin">
                                    <Col>
                                        <FormItem label={formatMessage({
                                            id: 'detailPage.data.remark',
                                            defaultMessage: '备注'
                                        })}{...FORM_ROW_OPTIONS.item}>
                                            {data.remark}
                                        </FormItem>
                                    </Col>
                                </Row>
                            </Card>
                            <Card
                                title={formatMessage({
                                    id: 'detailPage.details.title',
                                    defaultMessage: 'GoodWill清单'
                                })}>
                                <Table
                                    className="white-space-nowrap"
                                    rowKey="id"
                                    columns={columns}
                                    pagination={false}
                                    dataSource={this.state.details}
                                    {...TABLE} />
                            </Card>
                            <Card
                                title={formatMessage({
                                    id: 'detailPage.operation.fileAth',
                                    defaultMessage: '附件清单'
                                })}>
                                {athDetails && athDetails.length > 0
                                    ? <div>
                                        {
                                            (athDetailsTuPhoto || athDetailsTuFile) &&
                                            <DescriptionList title={formatMessage({
                                                id: 'detailPanel.card.attachmentTu',
                                                defaultMessage: '图片资料附件'
                                            })} size="large">
                                                {(athDetailsTuPhoto.attachments && athDetailsTuPhoto.attachments.length > 0) &&
                                                <div><ImageUpload fileList={athDetailsTuPhoto.attachments} isUpload={false}/>
                                                    <Divider /></div>}
                                                {(athDetailsTuFile.attachments && athDetailsTuFile.attachments.length > 0) &&
                                                    athDetailsTuFile.attachments.map(item => (<Description key={item.fileId}>
                                                        {item.filePath ? <a onClick={this.onClickDownload}
                                                            key={item.fileId} data-id={item.filePath} data-applyid={item.fileName}>
                                                            {item.fileName}</a> : <a icon="download" download
                                                            href={`${FILES_API.files}/${item.fileId}`} size="small">{item.fileName}</a>}
                                                    </Description>))}
                                            </DescriptionList>
                                        }
                                    </div>
                                    : formatMessage({
                                        id: 'detailPanel.content.noAttachment',
                                        defaultMessage: '暂无附件'
                                    })}
                            </Card>
                            <Card>
                                <DescriptionList title={formatMessage({
                                    id: 'confirmPanel.table.confirmResultdetails',
                                    defaultMessage: '操作履历'
                                })}>
                                    <Table
                                        className="white-space-nowrap"
                                        columns={columResults}
                                        rowKey="id"
                                        pagination={false}
                                        dataSource={this.state.approveResults}
                                        {...TABLE} />
                                </DescriptionList>
                            </Card>
                            <Card {...FORM_OPTIONS.col} title={formatMessage({
                                id: 'confirmPanel.card.comment',
                                defaultMessage: '审核区域'
                            })}>
                                <Row>
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem
                                            label={formatMessage({
                                                id: 'confirmPanel.operation.goodWillType',
                                                defaultMessage: '归类'
                                            })}
                                            {...FORM_OPTIONS.item}
                                            validateStatus={validateGoodWillType}
                                            required>
                                            <WrappedSelect
                                                name="goodWillType"
                                                value={data.type || confirmDetail.goodWillType}
                                                options={goodWillType.toList(language)}
                                                onChange={this.onChange} />
                                        </FormItem>
                                    </Col>
                            
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem
                                            label={formatMessage({
                                                id: 'confirmPanel.operation.approvedResult',
                                                defaultMessage: '审核结果'
                                            })}
                                            {...FORM_OPTIONS.item}
                                            validateStatus={validateApprovedResult}
                                            required>
                                            <WrappedSelect
                                                name="approvedResult"
                                                value={confirmDetail.approvedResult}
                                                options={claimApprovedResult.toList(language).filter(d => d.value !== 4)}
                                                onChange={this.onChange} />
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col {...FORM_ROW_OPTIONS.col}>
                                        <FormItem
                                            label={formatMessage({
                                                id: 'confirmPanel.form.approveComment',
                                                defaultMessage: '审核意见'
                                            })}
                                            {...FORM_ROW_OPTIONS.item}
                                            validateStatus={validateApproveComment}
                                            required>
                                            <TextInput
                                                type="textarea"
                                                name="approveComment"
                                                value={confirmDetail.approveComment}
                                                onBlur={this.onChange} />
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col {...FORM_ROW_OPTIONS.col}>
                                        <FormItem
                                            label={formatMessage({
                                                id: 'confirmPanel.form.noticer',
                                                defaultMessage: '通知人'
                                            })}
                                            {...FORM_ROW_OPTIONS.item}>
                                            <SearchInput
                                                disabled={true}
                                                value={confirmDetail.noticerName}
                                                onClickSearchBtn={() => this.onClickSearchPersonnelBtn()} />
                                                
                                        </FormItem>
                                    </Col>
                                </Row>
                            </Card>
                        </Form>
                        <Card type="inner">
                            <Row>
                                <Col disabled={!submitable} className="col-align-right">
                                    <Button key="submit" loading={this.state.loading}
                                        onClick={this.onSubmit} type="primary">{formatMessage({
                                            id: 'confirmPanel.btn.submit',
                                            defaultMessage: '提交'
                                        })}</Button>
                                </Col>
                            </Row>
                        </Card>
                    </div>
                    {
                        this.state.showPersonnelSelectPanel &&
                            <PersonnelSelectPanel
                                selectKey={confirmDetail.noticer}
                                onCancel={this.onClosePersonnelSelectPanel}
                                onSelect={this.onSelectPersonnel} />
                    }
                </Spin>
                <div className="page-toolbar">
                    <Button
                        type="primary"
                        disabled={this.state.loading}
                        onClick={onCancel}>{formatMessage({
                            id: 'detailPage.btn.return',
                            defaultMessage: '返回'
                        })}</Button>
                </div>
            </div>
        );
    }
}

ConfirmPanel.propTypes = {
    permissions: PropTypes.array.isRequired,
    onCancel: PropTypes.func.isRequired,
    history: PropTypes.object,
    isDealerUser: PropTypes.bool,
    successReturn: PropTypes.func,
};

import {connect} from 'react-redux';
import {tableSearch} from './actions';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';

const getPermissions = selectorFactory(['page', 'domainData', 'permission', 'data']);
const mapStateToProps = state => ({
    permissions: getPermissions(state),
    isDealerUser: state.getIn((['page', 'domainData', 'initData', 'isDealerUser'])),
});
const mapDispatchToProps = (dispatch, props) => ({
    onCancel: () => {
        props.history.push(routes.query.url());
    },
    successReturn: () => {
        dispatch(tableSearch());
        props.history.push(routes.query.url());
    },
});
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(ConfirmPanel));
